<template>
    <div class="com-container">
        <!-- 显示图表 -->
        <div class="com-chart" ref="stock_ref">

        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            chartInstance:null,
            //服务器获取数据
            allData:null,
            currentIndex:0,//当前显示数据的页数
            timeId:null,
        }
    },
    created(){
        //回调函数的注册
        this.$socket.registerCallBack('stockData',this.getData)
    },
    mounted() {
        this.initChart()
        // this.getData()
        //获取数据 发送数据给服务器
        this.$socket.send({
            action:'getData',
            socketType:'stockData',
            chartName:'stock',
            value:''
        })
        //分辨率适配
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    destroyed(){
        //取消监听
        window.removeEventListener('resize', this.screenAdapter)
        clearInterval(this.timeId)
        //回调函数的取消
        this.$socket.unRegisterCallBack("stockData")
    },
    methods: {
         initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.stock_ref,this.theme)
            const initOption = {
                    title:{
                        text:'▎库存和销量分析',
                        left: 20,
                        top: 20,
                    }
            }
            this.chartInstance.setOption(initOption)
            this.chartInstance.on('mouseover', ()=>{
                clearInterval(this.timeId)
            })
            this.chartInstance.on('mouseout', ()=>{
                this.startInterval()
            })
         },
         async getData(res){
                // const {data:res} =  await this.$http.get('stock')
                this.allData = res
                console.log(this.allData)
                this.updateChart()
                //调用定时器
                this.startInterval()
         },
         updateChart(){
            //处理数据
            const centerArr = [
                ['18%', '40%'],
                ['50%', '40%'],
                ['82%', '40%'],
                ['34%', '75%'],
                ['66%', '75%'],
            ]
            const colorArr = [
                ['#4FF778', '#0BA82C'],
                ['#E5DD45', '#E8B11C'],
                ['#E8821C', '#E55445'],
                ['#5052EE', '#AB6EE5'],
                ['#23E5E5', '#2E72BF'],
            ]
            const start = this.currentIndex * 5
            const end = (this.currentIndex + 1) * 5
            const showData =this.allData.slice(start,end)
            const seriesArr = showData.map((item,index)=>{
                    return{
                        type:'pie',
                        // radius:[110,100],
                        //饼图位置
                        center:centerArr[index],
                        hoverAnimation:false,//鼠标移入饼图动画效果
                        labelLine:{
                            show:false,//饼图指示线
                        },
                        label:{
                            position:'center',//文字在饼状图居中
                            color:colorArr[index][0],
                            
                        },
                        data:[
                            {   
                                name:item.name + '\n\n' + item.sales,//名称和销量
                                //销量
                                value:item.sales,
                                itemStyle:{
                                     //渐变
                                    color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[
                                        {
                                            offset:0,//0%
                                            color:colorArr[index][0]
                                        },
                                        {
                                            offset:1, //100%
                                            color:colorArr[index][1]
                                        }
                                    ])
                                }
                            },
                            {   
                                //库存
                                value:item.stock,
                                itemStyle:{
                                    color:'#333843'
                                }
                            }
                        ]
                    }
            })
            const dataOption = {
                series:seriesArr
            }
            this.chartInstance.setOption(dataOption)
         },
         screenAdapter(){
            const titleFontSize = this.$refs.stock_ref.offsetWidth / 100 * 3.6
            const innerRadius = titleFontSize * 2.8
            const outterRadius = innerRadius * 1.125
            const adapterOption = {
                title:{
                    textStyle:{
                        fontSize:titleFontSize
                    }
                },
                series:[
                    //5个圆环半径
                    {   
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                        label:{
                            fontSize:titleFontSize/1.3
                        }
                    },
                    {
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                        label:{
                            fontSize:titleFontSize/1.3
                        }
                    },
                    {
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                        label:{
                            fontSize:titleFontSize/1.3
                        }
                    },
                    {
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                        label:{
                            fontSize:titleFontSize/1.3
                        }
                    },
                    {
                        type:'pie',
                        radius:[outterRadius,innerRadius],
                        label:{
                            fontSize:titleFontSize/1.3
                        }
                    }

                ]
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()

         },
         startInterval(){
            if(this.timeId){
                clearInterval(this.timeId)
            }
            this.timeId = setInterval(()=>{this.currentIndex++
                if(this.currentIndex>1){
                    this.currentIndex = 0
                }
                this.updateChart()
            },5000)
         }
    },
    computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme () {
      console.log('主题切换了')
      this.chartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.updateChart() // 更新图表的展示
    }
  }
}
</script>

<style>

</style>